<template>
  <div class="app-container" v-loading="pageLoading">
    <div class="text-wrap">
      <div class="desc-text text-primary">
        <i class="el-icon-s-grid" />
        <span class="text">废料信息表</span>
      </div>

      <div class="filter-container " style="float:right">
        <el-select class="filter-item" style="width:300px" v-model="query.type" @change="getList">
          <el-option v-for="(i,t) in types" :key="t" :label='i.label' :value='i.value'></el-option>
        </el-select>
        <el-input placeholder="请输入单号" style="width:300px" class="filter-item" v-model="query.str"></el-input>
        <el-button class="filter-item" type="primary" plain @click="research" >查询</el-button>
        <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading"
         >导出 </el-button>
      </div>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columList.find(i=> i.type == query.type).columns"
      @editItem="editItem" @deleteItem="deleteItem">
      <template #content="{key,row}">
        <div v-if="key=='Type'">
          <span class="text-bold">{{ types.find(i => i.value == row[key]).label}}</span>
        </div>
        <span v-else>{{ row[key] }}</span>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" v-model:page="query.page" v-model:limit="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" v-model="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import dayjs from 'dayjs'
export default {
  mixins: [commonMixin],
  name: 'wasteReport',
  data: function () {
    return {
      api: this.$api.WmsInData,
      apiEdit: this.$api.custom + 'add',
      name: '废料信息',
      postForList: true,
      query: {
        size: 10,
        page: 1,
        type: 1,
      },
      types: [
        { value: 1, label: '毛坯生产入库' },
        // { value: 2, label: '黑片生产入库' },
        // { value: 3, label: '白片生产入库' },
      ],
      columList: [
        {
          type: 1,
          columns: [
            { title: '单号', key: 'OrderNo', width: 180 },
            { title: '类型', key: 'Type', width: 100 },
            { title: '单据产品', key: 'material3', width: 180 },
            { title: '转换后物料1', key: 'material1', width: 140 },
            { title: '转换后物料2', key: 'material2', width: 140 },
            { title: '合格重量', key: 'Value1' },
            { title: '合格数量', key: 'Value2' },
            { title: '回填重量', key: 'Value3' },
            { title: '回填数量', key: 'Value4' },
            { title: '回收重量', key: 'Value5' },
            { title: '回收数量', key: 'Value6' },
            { title: '修改人', key: 'Creator', width: 180 },
            { title: '最后修改', key: 'CreateTime', width: 240 },
          ],
        },
        {
          type: 2,
          columns: [
            { title: '单号', key: 'order_no' },
            { title: '类型', key: 'type' },
            { title: '单据产品', key: 'material3' },
            { title: '转换后物料1', key: 'material1', width: '100' },
            { title: '转换后物料2', key: 'material2', width: '100' },
            { title: '合格重量', key: 'Value1' },
            { title: '合格数量', key: 'Value2' },
            { title: '工残重量', key: 'Value3' },
            { title: '工残数量', key: 'Value4' },
            { title: '料残重量', key: 'Value5' },
            { title: '料残数量', key: 'Value6' },
            { title: '退料重量', key: 'Value7' },
            { title: '退料数量', key: 'Value8' },
            { title: '料皮重量', key: 'Value9' },
            { title: '送样数量', key: 'Value10' },
            { title: '修改人', key: 'Creator', width: 180 },
            { title: '最后修改', key: 'CreateTime', width: 240 },
          ],
        },
        {
          type: 3,
          columns: [
            { title: '单号', key: 'order_no' },
            { title: '类型', key: 'type' },
            { title: '单据产品', key: 'material3' },
            { title: '转换后物料1', key: 'material1', width: '100' },
            { title: '转换后物料2', key: 'material2', width: '100' },
            { title: '合格重量', key: 'Value1' },
            { title: '合格数量', key: 'Value2' },
            { title: '残片重量', key: 'Value3' },
            { title: '残片数量', key: 'Value4' },
            { title: '可返重量', key: 'Value5' },
            { title: '可返数量', key: 'Value6' },
            { title: '送样数量', key: 'Value10' },
            { title: '回收档位', key: 'erp_recycle_grade' },
            { title: '料皮档位', key: 'erp_surface_grade' },
            { title: '镀层', key: 'erp_plating' },
            { title: '是否有磁', key: 'erp_magnetizing' },
            { title: '原镀层', key: 'erp_origin_plating' },
            { title: '加工单ID', key: 'erp_production_id' },
            { title: '修改人', key: 'Creator', width: 180 },
            { title: '最后修改', key: 'CreateTime', width: 240 },
          ],
        },
      ],

      tableProps: {
        border: true,
        hideOperations: true,
        // opsColWith: 140, //不定义默认80
        // showSelection: true, // 是否开启复选
        // expandable: true, //是否展开行
        // showIndexCol: false, //是否显示索引列
        // indexColWidth: 50, //索引列宽度
      },
      fields: [],
      initData: {
        type: 3,
      },
    }
  },
  methods: {
    exportData() {
      let url = this.apiList || this.api + 'getlist'
      let query = this.formatQuery(this.query)
      query.page = 1
      query.size = 99999
      this.exportLoading = true
      this.http[this.postForList ? 'post' : 'get'](url, query)
        .then((r) => {
          var exprotList = this.formatList(r.rows)
          import('../../vendor/Export2Excel')
           .then((excel) => {
             let columns =  this.columList.find(i => i.type == query.type).columns
             const filterVal = columns.map((item) => {
               return item.key
             })
             const tHeader = columns.map((item) => {
               return item.title || item.key
             })
             const data = exprotList.map((v) => filterVal.map((j) => v[j]))
             excel.export_json_to_excel({
               header: tHeader,
               data,
               filename: this.name + '_' + dayjs().format('YYYYMMDD'),
             })
             this.exportLoading = false
           })
           .finally(() => {
             this.exportLoading = false
           })
        })
        .catch(() => {
          this.exportLoading = false
        })
    },
    getList() {
      this.pageLoading = true
      let url =  this.api + 'getlist'
      this.http.post(url, this.formatQuery(this.query))
        .then((r) => {
          this.list = this.formatList(r.rows)
          this.total = r.total
        })
        .finally(() => {
          this.pageLoading = false
        })
    },
  },
  created: function () {
    this.getList()
  },
  watch: {},
}
</script>
<style scoped lang="scss">
.text-wrap {
  height: 40px;
  position: relative;
  padding-bottom: 8px;
  display: flex;
  justify-content: space-between;
  .desc-text {
    //  display: inline-block;
    margin-top: 7px;
    font-weight: bold;
    //margin-bottom: 3px;
    font-size: 14px;
    white-space: nowrap;
    border-bottom: 2px solid #7300e6;

    i {
      font-size: 16px;
      position: relative;
      top: 1px;
      margin-right: 2px;
    }
  }
}
</style>
